<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        /*css过渡的类名 v-enter  v-enter-active   v-enter-to   v-leave   v-leave-active  v-leave-to  */
        /*如果transition没有name的话，则默认v- 为这些类型的前缀，如果有name=“XXX”，则v-enter会替换为XXX-enter*/
        .fade-enter-active {
            transition: opacity .5s;
            color: red;
        }

        .fade-leave-active {
            transition: opacity .5s;
            color: blue;
        }

        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
        {
            opacity: 0;
        }

        table {

        }

        [v-cloak] {
            display: none;
        }

        #app, #root {
            display: none;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .font18 {
            font-size: 18px;
        }

        .fontWeight {
            font-weight: bolder;
        }
    </style>
</head>
<body>
<!--v-bind:title: 的特性被称为指令，缩写为：-->
<!--v-on:click 缩写为@：click-->
<div id="app">

    <div></div>

    {{message}}
    <span :title="message" @click="alert">鼠标悬停查看此处动态绑定的信息</span>
    <p v-if="seen">你看得见吗？</p>

    <button @click="handClick">切换显示 {{show}}</button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>

    <ol>
        <!--key值必须每项不一样  当对列表有频繁I变更的时候，用index不合适 ========？？？？？？？？？？？？？？？？============-->
        <li v-for="(todo,index) in todos" :key="index">
            {{todo.text}} -----{{todo.date}}
        </li>
    </ol>
    <button @click="reserveMessage">逆转消息</button>

    <p>{{content}}</p>
    <input v-model="content">
    <div>{{reserveMessage1}}</div>
    <div style="color: red;">{{date}}</div>
    <button style="color: red;" @click="date1">{{time}}</button>

    <hr>
    姓：<input v-model="firstName">
    姓：<input v-model="lastName">
    <div>{{fullName}}</div>
    <div style="color: red;">{{count}}</div>

    <!--v-if  当对应的为false时，会再dom树上被清除   v-show 会隐藏   频繁进行操作时，选v-show性能更好-->
    <!--v-if操作dom树，销毁和重建，有更高的切换消耗     v-show 只是简单的基于css的切换初始渲染消耗大-->
    <div v-show="show">Hello word</div>
    <button @click="handleClick">toggle</button>
</div>


<!--todolist-->
<!--删除 发布订阅模式-->
<div id="root">
    <input v-model="inputValue">
    <button @click="handlesubmit">提交</button>
    <ul>
        <todo-item
                v-for="(todo,index) of todoList"
                :key="index"
                :content="todo"
                :index="index"
                @delete="handleDelete"
        ></todo-item>
    </ul>
</div>

<!--控制切换一个元素是否显示-->

<!--父模板像子组件传递他的值，供子组件使用，当点击子组件上的事件时，触发事件，
$emit,当父组件监听到子组件触发的事件时，触发父组件对应的方法-->

<div id="directives">

    <div>
        <!--<p>v-text:更新元素</p>-->
        <p v-text="msg"></p>
        <p v-html="html"></p>
        <!--v-pre 跳过编译-->
        <p v-pre>{{msg}}</p>
        <!--v-vloak 用来保持在元素上直到关联结束时进行编译防止页面闪烁-->
        <p v-text="msg" v-cloak></p>
        <!--v-once 表示只会渲染一次,实例及其子节点被视为静态内容并跳过编译，优化性能-->

        <p v-once>原始内容：{{msg1}}</p>
        <p>新内容：{{msg1}}</p>
        <input type="text" v-model="msg1">

        <!--v-if 会销毁和重建，初次渲染性能高，但不适合频繁切换状态，如果初次渲染时条件为假，则什么也不做，只有当为真时，才会作用
         v-show只会显示和隐藏元素，初次渲染慢，适合频繁切换状态-->

        <input type="number" v-model="score">
        <p v-if="score > 80 "> 优秀</p>
        <p v-else-if="score > 60 "> 合格</p>
        <p v-else="score < 80 "> 不合格</p>

        <id_example></id_example>

        <ul>
            <li v-for="(item,index) in items">
                order:{{index}};
                name: {{item.name}};
                age:{{item.age}}
            </li>
        </ul>


        <ul>
            <list_a v-for="(item,index) of items"
                    :content="item.name"></list_a>
        </ul>


    </div>

    <div v-if="loginType === 'username'">
        <label>username:</label>
        <input type="text" placeholder="请输入用户名" key="username-input">
    </div>
    <div v-else>
        <label>email :</label>
        <input type="text" placeholder="请输入邮箱" key="email-input">
    </div>

    <button @click="changeAction()">按钮</button>


    <ul>
        <li v-for="(item,index) in list">
            name: {{item}};
        </li>
    </ul>

    <ul>
        <li v-for="(item,index) in items">
            order:{{index}};
            name: {{item.name}};
            age:{{item.age}}
        </li>
    </ul>


    <button @click="addNewItem()"> 添加</button>

    <div :class="classObj">今天天气好晴朗</div>

    <button @click="changeClass">改变颜色</button>

    <div>
        <input type="checkbox" id="checkbox1" v-model="checked">
        <label for="checkbox1">checkbox1</label>
        <input type="checkbox" id="checkbox2" v-model="checked">
        <label for="checkbox2">checkbox2</label>
        <input type="checkbox" id="checkbox3" v-model="checked">
        <label for="checkbox3">checkbox3</label>
        <p>{{checked}}</p>
    </div>


    <comp :foo.sync="bar"></comp>
    <!--语法糖，会被扩展为-->
    <!--<comp :foo="bar" @update:foo="val=>bar=val"></comp>-->

</div>
<template id="ifEx" v-if="ok">
    <div>
        <p>jkjdks</p>
        <p style="color: red;">jaslkdjl</p>
        <p>jlkajds</p>
    </div>
</template>
<template id="list">
</template>

<!--使用自定义事件的表单输入组件-->
<!--货币输入自定义组件-->
<div id="currency_input">
    {{price}}
    <currency_comp v-model="price"></currency_comp>
</div>

<template id="currency_input_temp">
    <span>
        $<input ref="input" :value="value" @input="updateValue($event.target.value)">
    </span>
</template>


<script>
    Vue.component('todo-item', {
        props: ['content', 'index'],
        template: '<li @click="handleClick">{{content}}---{{index}}</li>',
        methods: {
            handleClick: function (index) {
                this.$emit('delete', this.index)  //触发事件
            }
        }
    })

    Vue.component('comp', {
        props: ['foo'],
        template: `<h1 @click="click">{{foo}}</h1>`,
        methods: {
            click: function () {
                this.$emit('update:foo', 'hhhhh')
            }
        }

    })

    new Vue({
        el: "#root",
        data: {
            inputValue: '',
            todoList: []
        },
        methods: {
            handlesubmit: function () {
                this.todoList.push(this.inputValue)
                this.inputValue = ''
            },
            handleDelete: function (index) {
                this.todoList.splice(index, 1)
            }
        }
    })

    new Vue({
        el: "#app", //接管页面上的哪个元素
        data: {
            message: "车师兄" + new Date().toLocaleString(),
            content: "输入框信息",
            seen: true,
            show: false,
            firstName: 'fang',
            lastName: 'juan',
            time: '90',
            count: 0,
            todos: [
                {text: "学习javaScript", date: "2018年1-5月"},
                {text: "学习vue", date: "2018年5-7月"},
                {text: "实战", date: "2018年7-12月"},
            ]
        },

//         计算属性   ======   一个属性通过另外的属性计算而来
//        计算属性和方法都可以计算一个结果，然而计算属性是基于他们的依赖（本例中为  message ）进行缓存的，只有在相关依赖发生改变是才会重新求值
//        意味着只要依赖还没有改变，多次访问   reserveMessage1  会立即返回之前的计算结果，而不必再次执行函数
//        本例中date 计算属性将不再更新
        computed: {
            fullName: function () {
                return this.firstName + ' ' + this.lastName
            },
            reserveMessage1: function () {
                return this.message.split('').reverse().join('')
            },
            date: function () {
                return Date.now();
            }

        },
        // 方法   ==
        methods: {
            alert: function () {
                alert("hhhhh")
            },
            handleClick: function () {
                this.show = !this.show
            },
            handClick: function () {
                this.show = !this.show
            },
            reserveMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },
            date1: function () {
                this.time = Date.now()
            }
        },

//        侦听器，坚挺某一个数据的变化，一旦某个数据发生变化，就在侦听器内改变
        watch: {
            fullName: function () {
                this.count++
            }
//            firstName: function () {
//                this.count++
//            },
//            lastName: function () {
//                this.count++
//            }
        }
    })

    Vue.component('id_example', {

        template: '#ifEx',
        data() {
            return {
                ok: false
            }
        }
    });

    Vue.component('list_a', {
        props: ["content"],
        template: `<li>{{content}}</li>`
    })
    new Vue({
        el: '#directives',
        data: {
            msg: '今天天气很好',
            msg1: 'hhhhhhaaa',
            score: '90',
            str: 'hjhkjsahkjsh',
            loginType: 'username',
            isActive: false,
            checked: [true, false, true],
            bar: 'nihao',
            html:
                `
                <p>
                <span style="color: red;">
                Hello world
                </span>
                </p>
                `,
            items: [
                {name: "Alice", age: 18},
                {name: "Bob", age: 28},
                {name: "Charly", age: 24},
            ],

            list: {
                text1: "hello"
            },
            classObj: {
                red: true,
                font18: true,
                fontWeight: true
            }
        },
        methods: {
            changeAction() {
                console.log(this.loginType);
                if (this.loginType === 'username') {
                    this.loginType = ''
                } else {
                    this.loginType = 'username'
                }
            },

            addNewItem() {
                let item1 = {name: 'Dadam', age: 10}
                Vue.set(this.list, "text2", "world")
                Vue.set(this.items, 2, item1)
            },
            changeClass() {
                console.log(this.isActive)
                this.isActive = !this.isActive
            }

        },
    })

    let fruits = ['apple', 'orange', 'grape', 'banana']
    console.log(fruits.shift());//把数组中第一个元素删除掉并返回第一个元素的值
    console.log(fruits.pop());//把数组中最后一个元素删除掉并返回删除的元素的值
    console.log(fruits.unshift("hahah", "hshsa", "kkosk")); //在数组第一个元素前面插入若干条数据，并返回数组的新长度
    console.log(fruits.push("hahah", "hshsa", "kkosk")); //在数组末尾插入若干条数据，并返回数组的新长度
    // fruits.splice(index,howmany,item1, ..., itemX)    console.log(fruits);
    // splice方法向/从数组中添加/删除项目，返回被删除的项目，改变原始数组
    fruits.splice(-1, 2, "xixi") //删除第3个元素，并用xixi代替第三个元素
    console.log(fruits);
    // sort()排序
    // reserve()颠倒数组中的顺序，不会创建新的数组
    // 1、  .filter(selector)遍历指定选择器
    // 2、.filter()使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。
    // 对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。返回新数组
    // concat方法用于连接两个或多个数组

    // 给数组设置新值

    // 货币输入组件
    Vue.component('currency_comp', {
        props: ['value'],
        template: '#currency_input_temp',
        methods: {
            updateValue: function (value) {
                var formatValue = value.trim()
                if (formatValue !== value) {
                    this.$refs.input.value = formatValue
                }
                this.$emit('input', Number(formatValue))
            }
        }
    })

    new Vue({
        el: '#currency_input',
        data: {
            price: ''
        }
    })
</script>
</body>
</html>